<template>
	<view :style="colorStyle">
		<form @submit="formSubmit">
			<view class='addAddress'>
				<view class='list'>
					<view class='item acea-row row-between-wrapper'>
						<view class='cate_id'>{{$t(`渠道码分类`)}}</view>
						<picker @change="bindPickerChange" range-key="name" :value="setIndex" :range="array">
							<view class="uni-input input">{{array[setIndex].name}}</view>
						</picker>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>{{$t(`渠道码名称`)}}</view>
						<input type='text' :placeholder='$t(`请输入渠道码名称`)' name='name' :value="form.name"
							placeholder-class='placeholder'></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='share'>{{$t(`分成比例`)}}%</view>
						<input type='text' :placeholder='$t(`请输入分成比例`)' name='share' :value="form.share"
							placeholder-class='placeholder'></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='remark'>{{$t(`备注`)}}</view>
						<input type='text' :placeholder='$t(`请输入备注`)' name='remark' :value="form.remark"
							placeholder-class='placeholder'></input>
					</view>
				</view>

				<button class='keepBnt bg-color' form-type="submit">{{$t(`立即保存`)}}</button>
			</view>
		</form>
		<!-- #ifdef MP -->
		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
		<!-- #endif -->
		<!-- #ifndef MP -->
		<home></home>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		getChannelQrcodeCateList,
		getChannelQrcodeList,
		saveChannelQrcode,
		deleteChannelQrcode
	} from '@/api/channel.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";

	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import home from '@/components/home';
	import colors from '@/mixins/color.js';
	export default {
		components: {
			// #ifdef MP
			authorize,
			// #endif
			home,
		},
		mixins: [colors],
		data() {
			return {
				id: 0,
				form: {
					cate_id: '',
					name: '',
					share: '',
					remark: '',
					content: {
						content: "2",
						src: "",
						list: []
					}
				},

				setIndex: 0,
				array: [],
			};
		},
		computed: mapGetters(['isLogin']),
		watch: {

		},
		onLoad(options) {
			if (this.isLogin) {
				this.getLangList()
				this.id = options.id || 0;
				this.form.cate_id = options.cate_id
				this.form.name = options.name
				this.form.share = options.share
				this.form.remark = options.remark
				uni.setNavigationBarTitle({
					title: options.id ? this.$t(`修改分类`) : this.$t(`添加分类`)
				})
			} else {
				toLogin();
			}
		},
		methods: {
			getLangList() {
				getChannelQrcodeCateList().then(res => {
					let data = res.data.data
					let arr = []
					for (var i = 0; i < data.length; i++) {
						let temp = {
							name: data[i].cate_name,
							value: data[i].id
						}
						arr.push(temp)
					}
					this.array = arr
					this.setLang();
				})
			},
			setLang() {
				this.array.map((item, i) => {
					if (this.form.cate_id == item.value) {
						this.setIndex = i
					}
				})
			},
			/**
			 * 提交用户添加地址
			 * 
			 */
			formSubmit: function(e) {
				let that = this,
					value = e.detail.value;

				value.id = that.id;
				value.content = that.form.content
				value.cate_id = that.array[that.setIndex].value

				uni.showLoading({
					title: that.$t(`保存中`),
					mask: true
				})
				saveChannelQrcode(value.id, value).then(res => {
					if (that.id)
						that.$util.Tips({
							title: that.$t(`修改成功`),
							icon: 'success'
						});
					else
						that.$util.Tips({
							title: that.$t(`添加成功`),
							icon: 'success'
						});
					setTimeout(function() {
						// #ifdef H5
						return history.back();
						// #endif
						// #ifndef H5
						return uni.navigateBack({
							delta: 1,
						})
						// #endif
					}, 1000);
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				})
			},

			bindPickerChange(e, item) {
				this.setIndex = e.detail.value
			},
		}
	}
</script>

<style scoped lang="scss">
	.fontcolor {
		color: var(--view-theme);
	}

	.addAddress .list {
		background-color: #fff;
	}

	.addAddress .list .item {
		padding: 30rpx;
		border-top: 1rpx solid #eee;
	}

	.addAddress .list .item .name {
		width: 195rpx;
		font-size: 30rpx;
		color: #333;
	}

	.addAddress .list .item .address {
		// width: 412rpx;
		flex: 1;
		margin-left: 20rpx;
	}

	.addAddress .list .item input {
		width: 475rpx;
		font-size: 30rpx;
	}

	.addAddress .list .item .placeholder {
		color: #ccc;
	}

	.addAddress .list .item picker {
		width: 475rpx;
	}

	.addAddress .list .item picker .picker {
		width: 410rpx;
		font-size: 30rpx;
	}

	.addAddress .list .item picker .iconfont {
		font-size: 43rpx;
	}

	.addAddress .default {
		padding: 0 30rpx;
		height: 90rpx;
		background-color: #fff;
		margin-top: 23rpx;
	}

	.addAddress .default checkbox {
		margin-right: 15rpx;
	}

	.addAddress .keepBnt {
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 50rpx auto;
		font-size: 32rpx;
		color: #fff;
	}

	.addAddress .wechatAddress {
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 0 auto;
		font-size: 32rpx;
		color: var(--view-theme);
		border: 1px solid var(--view-theme);
	}
</style>